<!--
 * hi-loadmore - 加载更多
 *
 * @author 济南晨霜信息技术有限公司
 * @mobile 18560000860 / 18754137913
 -->
<template>
    <view class="hi-loadmore" :class="_classes" :style="_styles" :hover-class="hover">
        <!-- loadmore -->
        <view class="hi-loadmore__body hi-loadmore__body--loadmore" v-if="status === 'loadmore'">
            <text class="hi-loadmore__text" @tap="_emits('more')">{{ more }}</text>
        </view>

        <!-- loading -->
        <view class="hi-loadmore__body hi-loadmore__body--loading" v-else-if="status === 'loading'">
            <hi-icon class="hi-loadmore__icon" :name="icon"></hi-icon>
            <text class="hi-loadmore__text">{{ loading }}</text>
        </view>

        <!-- nomore -->
        <view class="hi-loadmore__body hi-loadmore__body--nomore" v-else-if="status === 'nomore'">
            <text class="hi-loadmore__text">{{ nomore }}</text>
        </view>
    </view>
</template>

<!-- 由于 HbuilderX 不支持 defineOptions() 写法，故只能在此处进行配置 -->
<script>
    export default { options: uni?.$hi?.config?.componentsOptions || {} };
</script>

<script setup>
    import { computed } from "vue";
    import props from "./props.js";

    // 组件属性
    const _props = defineProps(props);

    // 组件事件
    const _emits = defineEmits(["more"]);

    // 组件类名
    const _classes = computed(() => {
        const classes = [];

        // 纵向
        if (_props.vertical) classes.push("hi-loadmore--vertical");

        return classes;
    });

    // 组件样式
    const _styles = computed(() => {
        const styles = [];

        // 文字颜色
        if (_props.color) styles.push(`--hi-loadmore-color: ${_props.color}`);

        // 文字大小
        if (_props.fontSize) styles.push(`--hi-loadmore-font-size: ${_props.fontSize}`);

        return styles;
    });
</script>

<style lang="scss" scoped>
    .hi-loadmore {
        display: var(--hi-loadmore-display, flex);
        flex-direction: var(--hi-loadmore-flex-direction, row);
        align-items: var(--hi-loadmore-align-items, center);
        justify-content: var(--hi-loadmore-justify-content, center);
        color: var(--hi-loadmore-color, inherit);
        font-size: var(--hi-loadmore-font-size, 0.8em);

        &__body {
            display: var(--hi-loadmore-body-display, flex);
            align-items: var(--hi-loadmore-body-align-items, center);
            justify-content: var(--hi-loadmore-body-justify-content, center);
            flex-direction: var(--hi-loadmor-body-flex-direction, row);
            gap: var(--hi-loadmore-body-gap, 5px);
        }

        &__icon {
            font-size: var(--hi-loadmore-icon-font-size, 1.5em);
            color: var(--hi-loadmore-icon-color, inherit);
            animation-name: hi-animate-spin;
            animation-duration: var(--hi-loadmore-animation-duration, 1.5s);
            animation-iteration-count: var(--hi-loadmore-animation-iteration-count, infinite);
            animation-timing-function: var(--hi-loadmore-animation-timing-function, linear);
        }

        &--vertical {
            .hi-loadmore__body {
                flex-direction: var(--hi-loadmor-body-flex-direction, column);
            }
        }
    }
</style>
